<template>
  <div class="goodsList-box">
    <AppTitle title="账号列表"></AppTitle>
  <div class="goodsList-table">
    <el-table :data="tableData" style="width: 100%">
      <!-- 展开 开始 -->
      <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">商品ID: {{ props.row.id }}</p>
          <p m="t-0 b-2">商品名: {{ props.row.name }}</p>
        </div>
      </template>
    </el-table-column>
    <!-- 展开 结束 -->
    <el-table-column label="商品名称" prop="name">
    </el-table-column>
    <el-table-column label="商品分类" prop="category">
    </el-table-column>
    <el-table-column label="商品价格" prop="price">
    </el-table-column>
    <el-table-column label="商品图片">
      <template #default="scope">
            <img :src="serverUrl + scope.row.imgUrl" alt="">
          </template>
    </el-table-column>
    <el-table-column label="商品描述" prop="goodsDesc">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div class="demo-pagination-block">
    <!-- <div class="demonstration">分页器</div> -->
    <el-pagination
      v-model:current-page="formData.currentPage"
      v-model:page-size="formData.pageSize"
      :page-sizes="[5, 10, 20, 50,100]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </div>
</template>
<script setup>
import { ref,reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {goodsList,goodsDel,goodsEdit} from '@/api/goods'
import AppTitle from '../../components/AppTitle.vue';
import { serverUrl } from '@/utils/common'
import { useRouter } from 'vue-router';
const tableData = ref([]);
const total = ref(0);
const router = useRouter();
const formData = reactive ({
  currentPage: 1,
  pageSize: 5
})
const ediForm = reactive ({
  id:'',
  goods:'',
  userGroup:''
})

// 当前页条数改变就会从新请求
const handleSizeChange = (val) => {
  // 因为前面数据用了双向绑定，可省略
  // formData.pageSize = val;
  getGoodsList()
}
// 当前页改变就会从新请求
const handleCurrentChange = (val) => {
  getGoodsList()
}
// 账号列表请求
const getGoodsList = async () => {
  const res = await goodsList(formData);
  console.log(res);
  tableData.value = res.data;
  total.value = res.total;
}
getGoodsList();
// 删除
const handleDelete =async (id) => {
  let res = await goodsDel({id});
  console.log(res);
  if(res.code == 0){
    // 重新请求
    getGoodsList();
    ElMessage.success(res.msg);
  }else{
    ElMessage.error(res.msg);
  }
}
// 编辑
const handleEdit = (row) => {
console.log(row);
    // 存储商品信息
  sessionStorage.setItem('goodsInfo',JSON.stringify(row));
      // 跳转到编辑页面
  router.push('/goodsEdit')
}
</script>

<style lang="scss" scoped>
.goodsList-box{
  width: 100%;
  height: 100%;
  // overflow: hidden;
.goodsList-table{
  padding:15px;
}
.demo-pagination-block{
  margin: 15px 0 0 0;
  padding-left: 15px;
}
.cell img{
  width: 50px;
  height: 50px;
}
}

</style>